<template>
  <header class="header clearfix">
    <a v-if="isBack" href="javascript:history.go(-1);" class="icon icon-back fl"></a>
    <h1 class="title fl">{{ title }}</h1>
    <a v-if="mine" class="icon icon-mine fr" href="#/mine">我的</a>
    <a v-if="home" class="icon icon-home fr" href="#/home">首页</a>
  </header>
</template>

<script>
import config from '@/config'
export default {
  props: {
    title: {
      type: String,
      default: config.pageTitle
    },
    isBack: {
      type: Boolean,
      default: false
    },
    mine: {
      type: Boolean,
      default: false
    },
    home: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less">
.header {
  padding: 0 0.3rem;
  background: #f6f6f6;
  position: relative;
  .title {
    height: 0.98rem;
    line-height: 0.98rem;
    font-size: 0.32rem;
  }
  .icon {
    display: inline-block;
  }
  .icon-back {
    width: 0.48rem;
    height: 0.98rem;
    background: url('../assets/images/left.png') no-repeat left center;
    background-size: 0.18rem;
  }
  .icon-mine {
    padding-left: 0.5rem;
    // width: 0.48rem;
    line-height: 1.1rem;
    height: 0.98rem;
    background: url('../assets/images/mine.svg') no-repeat left center;
    background-size: 0.42rem;
    font-size: 0.3rem;
    color: #666;
  }
  .icon-home {
    padding-left: 0.5rem;
    // width: 0.48rem;
    line-height: 1.1rem;
    height: 0.98rem;
    background: url('../assets/images/home.svg') no-repeat left center;
    background-size: 0.36rem;
    font-size: 0.3rem;
    color: #666;
  }
}
</style>
